import { ref, reactive, onMounted } from "vue";
// 导入轮播图列表接口
import { getCarouselList } from "@/api/carouselAPI";
// 导入时间处理库
import moment from "moment";

export const useCarouselDataList = () => {
  // 表格列的配置
  const columns = reactive([
    {
      title: "id",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "轮播状态",
      dataIndex: "status",
      key: "status",
    },
    {
      title: "跳转地址",
      dataIndex: "operate_place",
      key: "operate_place",
      width: 300,
    },
    {
      title: "开始时间",
      dataIndex: "start_time",
      key: "start_time",
    },
    {
      title: "结束时间",
      dataIndex: "end_time",
      key: "end_time",
    },
    {
      title: "图片地址",
      dataIndex: "swipe_image",
      key: "swipe_image",
      width: 500,
    },
    {
      title: "操作",
      key: "operation",
      slots: { customRender: "operation" },
      fixed: "right",
      align: "center",
    },
  ]);

  // 定义轮播图列表
  const data = ref([]);

  // 获取分类列表数据
  const getCarouselData = () => {
    // 发送请求获取轮播图列表
    getCarouselList()
      .then((res) => {
        // 遍历修改日期格式
        res.data.forEach((item) => {
          item.start_time = moment(item.start_time).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          item.end_time = moment(item.end_time).format("YYYY-MM-DD HH:mm:ss");
        });
        data.value = res.data;
      })
      .catch((error) => {
        throw new Error(error);
      });
  };

  onMounted(() => {
    getCarouselData();
  });

  return {
    columns,
    data,
    getCarouselData,
  };
};
